<template>
  <div class="app-container">
    <!-- 基础数据 -->
    <el-card style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <div class="card-title">基础数据</div>
      </div>
      <el-date-picker
        style="margin-bottom: 10px"
        v-model="baseDateArr"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :clearable="false"
        @change="getBaseStat"
      >
      </el-date-picker>
      <div class="card-1">
        <div class="card-1-table">
          <div class="card-table__title">充电数据</div>
          <el-table :data="tableData1" :border="true">
            <el-table-column prop="label" label="统计维度"></el-table-column>
            <el-table-column prop="col1" label="累计数据"></el-table-column>
            <el-table-column
              prop="col2"
              label="筛选时间内数据"
            ></el-table-column>
          </el-table>
        </div>
        <div class="card-1-table">
          <div class="card-table__title">设备数据</div>
          <el-table :data="tableData2" :border="true">
            <el-table-column prop="label" label="统计维度"></el-table-column>
            <el-table-column prop="col1" label="累计数据"></el-table-column>
            <el-table-column
              prop="col2"
              label="筛选时间内数据"
            ></el-table-column>
          </el-table>
        </div>
        <div class="card-1-table">
          <div class="card-table__title">实体卡数据</div>
          <el-table :data="tableData3" :border="true">
            <el-table-column prop="label" label="统计维度"></el-table-column>
            <el-table-column prop="col1" label="累计数据"></el-table-column>
            <el-table-column
              prop="col2"
              label="筛选时间内数据"
            ></el-table-column>
          </el-table>
        </div>

        <div class="card-1-table">
          <div class="card-table__title">钱包数据</div>
          <el-table :data="tableData4" :border="true">
            <el-table-column prop="label" label="统计维度"></el-table-column>
            <el-table-column prop="col1" label="累计数据"></el-table-column>
            <el-table-column
              prop="col2"
              label="筛选时间内数据"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <!-- 站点收入统计 -->
    <el-card style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <div class="card-title">站点收入统计</div>
      </div>
      <SiteIncomeStat />
    </el-card>
    <!-- 站点使用统计 -->
    <el-card style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <div class="card-title">站点使用统计</div>
      </div>
      <SiteUseStat />
    </el-card>
  </div>
</template>
<script>
import moment from "moment";
import { getBaseStatAPI } from "@/api/charge/totalAnalysisi";
import SiteIncomeStat from "./components/SiteIncomeStat.vue";
import SiteUseStat from "./components/SiteUseStat.vue";

export default {
  components: { SiteIncomeStat, SiteUseStat },
  data() {
    return {
      moment,
      baseDateArr: [
        moment().add(-1, "months").format("yyyy-MM-DD"),
        moment().format("yyyy-MM-DD"),
      ],

      // 基础数据
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
    };
  },
  created() {
    this.getBaseStat(this.baseDateArr);
  },
  methods: {
    // 基础数据
    getBaseStat(dateArr) {
      getBaseStatAPI({
        startTime: dateArr[0],
        endTime: dateArr[1],
      }).then((response) => {
        let res = response.data;
        this.tableData1 = [
          {
            label: "充电金额(元)",
            col1: res.chargeAmountTotal / 100,
            col2: res.chargeAmount / 100,
          },
          {
            label: "充电次数",
            col1: res.chargeTimesTotal,
            col2: res.chargeTimes,
          },
          {
            label: "充电人数",
            col1: res.chargeUserCountsTotal,
            col2: res.chargeUserCounts,
          },
        ];
        this.tableData2 = [
          {
            label: "站点数量",
            col1: res.stationCountsTotal,
            col2: "-",
          },
          {
            label: "充电桩数量",
            col1: res.deviceCountsTotal,
            col2: "-",
          },
          // {
          //   label: "消防设备数量",
          //   col1: 0,
          //   col2: "-",
          // },
        ];
        this.tableData3 = [
          {
            label: "实体卡充值金额(元)",
            col1: res.rechargeAmountTotal / 100,
            col2: res.rechargeAmount / 100,
          },
          {
            label: "实体卡充值次数",
            col1: res.rechargeTimesTotal,
            col2: res.rechargeTimes,
          },
          {
            label: "实体卡购买数量",
            col1: res.amountCardCountsTotal,
            col2: res.amountCardCounts,
          },
          // {
          //   label: "次数卡购买数量",
          //   col1: res.timesCardCountsTotal,
          //   col2: res.timesCardCounts,
          // },
        ];
        this.tableData4 = [
          {
            label: "钱包充值金额(元)",
            col1: res.rechargeAmountTotal / 100,
            col2: res.rechargeAmount / 100,
          },
          {
            label: "钱包充值次数(次)",
            col1: res.rechargeTimesTotal,
            col2: res.rechargeTimes,
          },
        ];
      });
    },
  },
};
</script>
<style scoped lang="scss">
.card-title {
  position: relative;
  margin-left: 10px;
  margin-bottom: 5px;
  font-size: 18px;
  color: #303133;
  font-weight: bold;

  &:after {
    content: "";
    position: absolute;
    background: #409eff;
    width: 4px;
    height: 15px;
    top: 50%;
    left: -6px;
    transform: translate(-100%, -50%);
  }
}

.card-1 {
  display: flex;

  .card-1-table {
    flex: auto;
    width: 30%;
    margin-right: 20px;

    .card-table__title {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: bold;
    }

    &:last-child {
      margin-right: none;
    }
  }
}
</style>
